<template>
    <div class="quality-task-table-container">
        <!-- 搜索和重置 -->
        <!-- <div class="search-header">
            <el-input v-model="searchQuery" placeholder="请输入内容" class="search-input">
                <template #prefix>
                    <el-icon>
                        <Search />
                    </el-icon>
                </template>
            </el-input>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button @click="handleReset">重置</el-button>
        </div> -->

        <el-table :data="tableData.data" style="width: 100%" class="dark-table" :header-cell-style="{
          backgroundColor: 'rgb(15, 53, 115)',
          color: '#91caf6'
        }" :cell-style="{
          backgroundColor: 'rgb(10, 43, 94)',
          color: '#91caf6'
        }" :row-style="{ height: '25px' }">
            <el-table-column label="序号" align="center" type="index" width="80" />
            <!-- <el-table-column label="数据标准类别" align="center" prop="type" />
            <el-table-column label="字段名" align="center" prop="name" />
            <el-table-column label="字段中文" align="center" prop="nameZh" /> -->
            <el-table-column v-for="item in tableData.X || []" :key="item.prop" :prop="item.prop" :label="item.label" />
        </el-table>

        <div class="pagination-container">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :total="tableData.total"
                @current-change="handleCurrentChange" background class="dark-pagination" />
        </div>
    </div>
</template>

<script setup>
    import { ref, computed, inject } from "vue";
    import { Search } from "@element-plus/icons-vue";

    const searchQuery = ref("");
    const currentPage = ref(1);
    const pageSize = ref(10);
    const props = defineProps({
        tableData: {
            type: Object,
            default: {}
        }
    });

    const handleSearch = () => {
        currentPage.value = 1;
        grandpaCallback1?.(searchQuery.value)
    };

    const handleReset = () => {
        searchQuery.value = "";
        currentPage.value = 1;
        grandpaCallback2?.({ n: 1, k: "" })
    };

    const handleSizeChange = (val) => {
        console.log('页面1', val);
        pageSize.value = val;
        currentPage.value = 1;
    };

    const grandpaCallback = inject('grandpaCallback');
    const grandpaCallback1 = inject('grandpaCallback1');
    const grandpaCallback2 = inject('grandpaCallback2');

    const handleCurrentChange = (val) => {
        console.log('页面2', val);
        currentPage.value = val;
        grandpaCallback?.(val)
    };


</script>

<style scoped>
    .quality-task-table-container {
        background-color: rgb(15, 53, 115);
        color: #91caf6;
        overflow-y: auto;
        height: 100%;
        padding: 10px;
    }

    .search-header {
        margin-bottom: 20px;
        display: flex;
        gap: 10px;
    }

    .search-input {
        width: 200px;
    }

    .pagination-container {
        margin-top: 20px;
        display: flex;
        justify-content: flex-end;
    }

    :deep(.dark-table) {
        height: 80%;
        background: rgb(10, 43, 94);
        --el-table-border-color: rgb(10, 43, 94);
        --el-table-border: 1px solid var(--el-table-border-color);
        --el-table-text-color: #91caf6;
        --el-table-header-text-color: #91caf6;
        --el-table-row-hover-bg-color: rgb(14, 51, 112);
    }

    :deep(.dark-pagination) {
        --el-pagination-bg-color: transparent;
        --el-pagination-text-color: #91caf6;
        --el-pagination-border-color: rgb(10, 43, 94);
        --el-pagination-hover-color: #409eff;
        --el-pagination-button-bg-color: transparent;
    }

    :deep(.el-button) {
        --el-button-bg-color: transparent;
        --el-button-border-color: #91caf6;
        --el-button-hover-bg-color: rgba(145, 202, 246, 0.1);
        --el-button-hover-border-color: #91caf6;
        --el-button-active-bg-color: rgba(145, 202, 246, 0.2);
        --el-button-text-color: #91caf6;
    }

    :deep(.el-button--primary) {
        --el-button-bg-color: rgba(64, 158, 255, 0.1);
        --el-button-border-color: #409eff;
        --el-button-hover-bg-color: rgba(64, 158, 255, 0.2);
        --el-button-hover-border-color: #409eff;
        --el-button-active-bg-color: rgba(64, 158, 255, 0.3);
        --el-button-text-color: #409eff;
    }

    :deep(.el-input) {
        --el-input-bg-color: transparent;
        --el-input-border-color: #91caf6;
        --el-input-text-color: #91caf6;
        --el-input-placeholder-color: rgba(145, 202, 246, 0.5);
    }

    /* 修改未点击时的数字方块背景颜色 */
    /* :deep .el-pagination .el-pager li:not(.active):not(.disabled):hover {
    background-color: #75fbff !important;
  } */
    /* 未点击时的数字方块背景颜色 */
    :deep .el-pagination .el-pager li:not(.active):not(.disabled) {
        background-color: #0e3a90 !important;
        color: #75fbff;
    }

    :deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
        background-color: #75fbff !important;
        color: #01133c;
    }
</style>